<template>
	<view class="wrap">
     <!-- 评价 -->
     <view class="shadow box5 pingjia-box re">
       <view v-for="item in list" :key="item.id" class="item u-font-26 u-m-b-16 shadow bgff u-p-26">
         <view class="u-flex u-flex-1 u-col-center u-tips-color u-font-22 u-m-b-10">
           <u-icon name="map"></u-icon>
           <text class="u-m-l-6">安徽</text>
           <text class="line"></text>
           <text>2024-02-02入住</text>
           <text class="line"></text>
           <text>其他类型</text>
           <text class="line"></text>
           <text>特惠大房</text>
         </view>
         <view class="u-m-b-16 z-line-15 u-666">打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位打扫很干净 细节到位</view>
         <view class="ov">
           <view class="u-flex u-flex-1 u-col-center">
               <u-image v-for="(items, index) in list" :key="items.id" v-if="items.image" :src="items.image" width="220rpx" height="220rpx" border-radius="10" class="u-m-r-18" @click="showImages(list, index)"></u-image>
           </view>
         </view>
         <view class="huifu">
           <view>商家回复：思念无声，千里外似空谷绝响。天地有，人海里终究惊鸿一瞥。望山欲空，茶香朝暮笺曲调中，竹挽溪风，终过人海携子余程。</view>
          <view class="u-flex u-flex-1 u-col-center u-tips-color u-font-22">
            <u-icon name="map"></u-icon>
            <text class="u-m-l-6">安徽</text>
          </view>
         </view>
       </view>
     </view>
  </view>
</template>
<style lang="scss" scoped>
  .pingjia-box{
    .fen{color: $uni-color-primary; background-color: $uni-color-primary-bg; padding: 0rpx 16rpx; border-radius: 40rpx; line-height: 30rpx; display: inline-block;}
    .item{border-radius: 8rpx;}
    .huifu{
      background-color: #f9f9f9; border-radius: 8rpx; line-height: 1.8; padding: 20rpx; margin-top: 20rpx; color: #666;
    }
    .line{width: 1px; height: 20rpx; background-color: #ededed; margin: 0 16rpx;}
  }
</style>
<script>
	export default {
		data() {
			return {
        
        list: [
          {
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name:'劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name:'支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name:'天天向上酒店'
          },{
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东',
            name:'劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店劳斯莱斯酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通',
            name:'支付宝哈罗酒店'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
            name:'天天向上酒店'
          },
        ],
        page:1,
        total:-1
			}
		},
    onLoad(){
      this.getList()
    },
    watch: {
      
    },
		methods: {
      showImages(imgUrl, index){
        imgUrl = imgUrl.map(m=>{return m.image})
        uni.previewImage({
          loop: true,
          urls: imgUrl, //可以展示imgUrl 列表中所有的图片
          current: index //首先当前index对应图片，左右可以切换其他序号的图片
        });
      },
      getList(){
        if(this.total === this.list.length) return
        this.$api.commentListApi({
          page:this.page
        }).then(res=>{
          if(this.total < this.list.length){
            this.page++
          }
        })
      },
		},
    onReachBottom() {
      if(this.page > 1 && this.total > this.list.length){
        this.getList()
      }
    }
	}
</script>